<template>
    <div class="comment-list">
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="评论中心"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >
            <div
                class="comment-empty-tips"
                v-if="goodsList.length == 0"
            >{{emptyTips}}</div>

            <div
                class="goods-info"
                v-for="(item,index) of goodsList"
                :key="index"
            >
                <div class="goods-img-box">
                    <img
                        class="goods-img"
                        :src="item.imgs"
                    />
                </div>
                <div class="goods-info-box">
                    <div class="goods-name">{{item.title}}</div>
                    <div class="goods-detail">{{item.title_sub}}</div>
                    <div class="goods-price">￥{{item.price_market | currency}}</div>
                </div>
                <div
                    class="go-comment-btn"
                    v-if="item.comment_id == null"
                    @click="goComment(item.goods_id,item.id)"
                >立即评价</div>
            </div>

        </common-scroll>
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'CommentList',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            goodsList: [],
            emptyTips: '正在全力加载中...'
        }
    },
    mounted() {
        this.getCommentGoodsList()
    },
    methods: {
        getCommentGoodsList() {
            if (this.$route.query.orderId) {
                let postData = this.qs.stringify({
                    order_id: this.$route.query.orderId
                })
                this.axios
                    .post('/api/user/comment/orders_goods_list.json', postData)
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                            if (data.data.length == 0) {
                                this.emptyTips = '暂无数据'
                            }
                            this.goodsList = data.data
                        } else {
                            this.commonDialog.alert('提示', data.msg)
                        }
                    })
            } else {
                this.axios
                    .post('/api/user/comment/uncomment.json')
                    .then(res => {
                        const data = res.data
                        if (data.status == 1) {
                            if (data.data.length == 0) {
                                this.emptyTips = '暂无数据'
                            }
                            this.goodsList = data.data
                        } else {
                            this.commonDialog.alert('提示', data.msg)
                        }
                    })
            }
        },
        goComment(goodsId, reviewId) {
            this.$router.push({
                path: '/comment',
                query: {
                    goodsId: goodsId,
                    reviewId: reviewId
                }
            })
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.comment-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.goods-info
    position relative
    display flex
    align-items center
    height 2.68rem
    padding 0 0.32rem
    background #fff
    margin-bottom 0.26rem
    .goods-img-box
        width 1.85rem
        height 1.85rem
        overflow hidden
        border 1px solid #e5e5e5
        box-sizing border-box
        .goods-img
            width 100%
            height 100%
    .goods-info-box
        flex 1
        min-width 1px
        margin-left 0.18rem
        .goods-name
            font-size 0.38rem
            color #333
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
        .goods-price
            margin-top 0.18rem
            font-size 0.33rem
            color #d7463c
        .goods-detail
            font-size 0.33rem
            color #666
            margin-top 0.18rem
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
    .go-comment-btn
        position absolute
        right 0.26rem
        bottom 0.26rem
        width 2.01rem
        height 0.6rem
        line-height 0.6rem
        font-size 0.33rem
        color #d7463c
        text-align center
        border 1px solid #d7463c
        border-radius 15px
</style>

